<template>
  <div class="decimal-item">
    <el-radio-group v-model="viewModel.actionType">
      <el-radio class="decimal-item_radio" :label="item.actionType" v-for="(item,index) in radioList" :key="index">
        <div class="ecimal-item_lable">
          <div class="lable-left">{{item.name}}</div>
          <div class="lable-right">
            <el-input-number :disabled="item.actionType!=viewModel.actionType" v-model="viewModel.value[item.actionType]" :min="min" :precision="precision" :step="step" controls-position="right"></el-input-number>
          </div>
        </div>
      </el-radio>
    </el-radio-group>
  </div>
</template>
<script>
  export default {
    model: {
      props: 'dataModel',
      event: 'chang'
    },
    props: {
      step: {},
      min: {},
      precision: {},
      dataModel: {},
      actionType: {}
    },
    data () {
      return {
        radioList: [
          { name: '直接替换', actionType: 'equal' },
          { name: '原基础上加', actionType: 'add' },
          { name: '原基础上减', actionType: 'reduce' },
          { name: '原基础上乘', actionType: 'take' },
          { name: '原基础上除', actionType: 'divide' }
        ],
        viewModel: {
          actionType: '',
          value: {}
        }
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        this.viewModel.actionType = this.actionType
        var this_ = this
        this.radioList.forEach(element => {
          this_.viewModel.value[element.actionType] = 0
        })
      }
    },
    watch: {
      viewModel: {
        deep: true,
        handler (val) {
          this.$emit('chang', this.viewModel.value[this.viewModel.actionType])
          this.$emit('actionTypeChang', this.viewModel.actionType)
        }
      }
    }
  }
</script>
<style lang="scss">
  .decimal-item {
    .decimal-item_radio {
      display: flex;
      align-items: center;
      margin: 0;
      margin-bottom: 10px;
      .ecimal-item_lable {
        display: flex;
        align-items: center;
        .lable-left {
          width: 80px;
        }
      }
    }
  }
</style>